<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>地图基础功能</title>
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">

    window.app = new GE.App('mapContainer', {
        // position: [120.025986, 30.248976, 9410], //相机的位置
        // lookAt: [120.025986, 30.248976, 0], //相机看向的地图位置
        // position: [121.97978, 40.75601, 150],
        // lookAt: [121.97978, 40.75601, 0],

        // position: [121.97978, 40.75601, 15000],
        // lookAt: [121.97978, 40.75601, 0],

        // position: [118.70929455757143,31.810619115878577, 1500],
        // lookAt: [118.70929455757143,31.810619115878577, 0],
        position: [113.9447,38.5611, 1500],
        lookAt: [113.9447,38.5611, 0],

        // isLoadSelectRange:true, //是否启用某区域范围内浏览
        // leftBottom:[121.90857676583558, 40.66178471819924, 0],//区域范围左下点位
        // rightUp:[122.05743505411345, 40.81460904866403, 0],//区域范围右上点位

        cameraScrollSpeed: 5, //鼠标滚动时，控制相机上下移动的速度
        // minZoom: 12, //允许地图的最小层级
        minZoom: 3, //允许地图的最小层级
        maxZoom: 22, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        useCarpet: true, //开启地图的地毯功能
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        maxSlopeAngle: 30, //地图最大倾斜角度
        // extraStep: 4, //额外加载瓦片的步长
        // verticalLevel: 15, //地图层级小于等于该层级开时，相机开始垂直正对着地图
        tileDefaultColor: '#C0C0C0', //瓦片默认颜色
        baseLayer: [
             //影像底图
            {
                // url: 'http://localhost:9009/examples/resources/正射地形/output/{z}/{x}/{y}.png',
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'https://osgoogle.xyplay.cn/maps/vt?lyrs=s&v=982&gl=cn&x={x}&y={y}&z={z}', //谷歌的影像地图url
                // url: 'https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsids=w&token=3c7931ed450acfc9c8170efeead4759b146cfb78f0ee6908dd7e287270ee1b6f', //星空的影像地图url
                // url: 'http://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=3bb81e2349c4124db96cb40501310902', //天地图的影像地图url
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                // name: 'baseMap',
                mapHeight: 0, //地图的高度, 默认是0
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                // isAdditionalLayer: true
                 isBackgroundLayer: true, //该图层是否作为地图的背景图层，一般背景图层都放在所有图层的最下面
                 colorSpace: 'srgb', //'', 
            },

            //影像底图
            {
                // url: 'http://localhost:9009/examples/resources/正射地形/output/{z}/{x}/{y}.png',
                url: 'http://117.172.141.173:5089/geoserver/gwc/service/wmts?layer=BZDOM:PSX-DOM-togcj&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}',
                // url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'https://osgoogle.xyplay.cn/maps/vt?lyrs=s&v=982&gl=cn&x={x}&y={y}&z={z}', //谷歌的影像地图url
                // url: 'https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsids=w&token=3c7931ed450acfc9c8170efeead4759b146cfb78f0ee6908dd7e287270ee1b6f', //星空的影像地图url
                // url: 'http://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=3bb81e2349c4124db96cb40501310902', //天地图的影像地图url
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                // name: 'additionalMap',
                mapHeight: 0, //地图的高度, 默认是0
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                isAdditionalLayer: true,
                maxDataLevel: 22,
                colorSpace: 'srgb', //'', 
            },


            // {
            //     url: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
            //     urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'image', //影像底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            // },

            // {
            //     url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=13059792bf406e1c5b6f6ff7599ea0f4',
            //     urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'image', //影像底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            // },
            // {
            //     url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6b71ea04b8ba21559988cf60e1bb4579',
            //     urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'image', //影像底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            // },
            // {
            //     wmsUrl: 'http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=13059792bf406e1c5b6f6ff7599ea0f4',
            //     urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'wms', //wms底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            // },
            
            // //带自定义基准点和bundle压缩的影像底图
            // {
            //     //带配置信息的松散型数据
            //     // configUrl: 'http://localhost:9000/examples/resources/辽东湾影像数据/图层/Conf.xml',
            //     // url:       'http://localhost:9000/examples/resources/辽东湾影像数据/图层/_alllayers/{z}/{y}/{x}.png',

            //     configUrl: 'http://36.212.170.187:9000/songsandata2/Conf.xml',
            //     url:       'http://36.212.170.187:9000/songsandata2/_alllayers/{z}/{y}/{x}.png',
            //     // configUrl: 'http://localhost:9000/examples/resources/configData/wuchangcustomer/wuchang_custom_conf.xml',
            //     // url:       'http://localhost:9000/examples/resources/configData/wuchangcustomer/{z}/{y}/{x}.png',

            //     //带配置信息的bundle型数据
            //     // configUrl: 'http://localhost:9000/examples/resources/configData/wuchang_bundle/Conf.xml',
            //     // bundleUrl: 'http://localhost:9000/examples/resources/configData/wuchang_bundle',
            //     colorSpace: 'srgb', //该图层的纹理使用的颜色空间，默认是''，还有其他参数：'srgb', 'linear', 
            //     urlDecimal: false, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'image', //影像底图
            //     mapHeight: 0, //地图的高度, 默认是0
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            //     maxDataLevel: 21, //该图层的最大数据层级，如果不设置默认是18
            //     isAdditionalLayer: true, //是否是附加图层
            // },
            // //shape底图
            // {
            //     url: 'http://localhost:9000/examples/resources/shp/Tiles/L{z}/{y}/{x}.shp', //shape底图的url
            //     url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/ShpCLipper/L{z}/{y}/{x}.shp', //shape底图的url
            //     urlDecimal: true, //shape底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
            //     tileType: 'shape',  //shape底图
            //     canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            //     merge: true, //几何体是否合并
            //     mapHeight: 0, //地图的高度, 默认是0
            // }
        ]
    });

    window.app.on('Click', function (e) {
        console.log(e);
    });
    btn();

    function btn() {
        let button = new GE.Button('鼠标滚动的速度', function () {
            window.app.options.Camera.cameraScrollSpeed = prompt('鼠标滚动的速度：', window.app.options.Camera.cameraScrollSpeed) || 5;
        });
        app.ui.add(button);
        window.button = button;

        let button2 = new GE.Button('地图最小层级', function () {
            let minZoom = prompt('地图最小层级(不能大于' + window.app.map.zoom + ')', window.app.options.Map.minZoom) || 3;
            if (window.app.map.zoom < minZoom) {
                alert('设置无效，因为最小图层不能大于当前所处的图层');
                return;
            }
            window.app.options.Map.minZoom = Number(minZoom);
        });
        app.ui.add(button2);

        let button3 = new GE.Button('地图最大层级', function () {
            let maxZoom = prompt('地图最大层级(不能小于' + window.app.map.zoom + ')', window.app.options.Map.maxZoom) || 18;
            if (window.app.map.zoom > maxZoom) {
                alert('设置无效，因为最大图层不能小于当前所处的图层');
                return;
            }
            window.app.options.Map.maxZoom = Number(maxZoom);
        });
        app.ui.add(button3);

        let button4 = new GE.Button('跳转层级', function () {
            let targetZoom = prompt('目标层级(不能小于' + window.app.options.Map.minZoom + ', 不能大于' + window.app.options.Map.maxZoom + ')');
            if (!targetZoom) {
                return;
            }
            targetZoom = parseInt(targetZoom);
            window.app.camera.setMapZoom({ mapZoom: targetZoom, cameraLookAt: window.app.camera.lookAtTarget });
        });
        app.ui.add(button4);

        let button5 = new GE.Button('放大地图', function () {
            let isZoomIn = true; //true表示放大，false表示缩小
            window.app.camera.zoomMap(isZoomIn);
        });
        app.ui.add(button5);

        let button6 = new GE.Button('缩小地图', function () {
            let isZoomIn = false; //true表示放大，false表示缩小
            window.app.camera.zoomMap(isZoomIn);
        });
        app.ui.add(button6);
    }

</script>

</html>